<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <th:block th:insert="~{/fixed/header::head}"></th:block>
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>
<script>
    $(function (){
        //异步获取商品分类信息
        $.ajax({
            url:"/admin/goodstype/getAllGoodstype",
            method:"POST",
            data:null,
            success:function (data){
                let html = "";
                $.each(data, function (index,goodstype){
                    html = html +
                        "<option value='" + goodstype.tid + "'>" + goodstype.goodstypeName + "</option>";
                });
                <!--添加到查询列表-->
                $("#selectGoodstype").html("<option value='0'>全部</option>" + html);

                $(".goodstype").html(html);
                $("tbody tr td").each(function() {
                    let spanValue = $(this).find("span").text();
                    $(this).find("select").val(spanValue);
                });
            }
        });

        //查询按钮点击响应事件
        $("#select").click(function (){
            //获取查询条件，并去除空格
            let selectByGoodsName = $.trim($("#selectByGoodsName").val());
            let selectGoodstype = $("#selectGoodstype").val();
            let selectGoodstypeName = $("#selectGoodstype").find("option:selected").text();
            console.log(selectGoodstype);
            //判断查询条件是否为空
            if (selectByGoodsName != "" || selectGoodstype != 0){
                //向后端发送数据
                $.ajax({
                    url:"/admin/goods/selectGoods",
                    method:"POST",
                    data:{"goodsName":selectByGoodsName,"tid":selectGoodstype},
                    success:function (data){
                        let html = "";
                        $(".tbody").html("");
                        $.each(data, function (index,goods){
                            html = html +
                                "<tr>\n" +
                                "<td>" + (index + 1) + "</td>" +
                                "<td>" + goods.goodsName + "</td>" +
                                "<td>" + selectGoodstypeName + "</td>" +
                                "<td>" + goods.goodsStock + "</td>" +
                                "<td>" + goods.goodsPrice + "元</td>" +
                                "<td>" + goods.goodsDescribe + "</td>" +
                                "<td>\n" +
                                "<a href=\"/admin/goods/updataGoods?gid= " + goods.gid + "\">\n" +
                                "<button  type=\"button\" class=\"btn btn-info\">修改</button>\n" +
                                "</a>\n" +
                                "<a href=\"/admin/goods/delete?gid=" + goods.gid + "\">\n" +
                                "<button type=\"button\" class=\"btn btn-danger\">删除</button>\n" +
                                "</a>\n" +
                                "</td>\n" +
                                "</tr>";
                        });
                        $("#tbody").html(html);
                    }
                })
            }else {
                $("#modalText").text("空的查询条件");
                $("#myModal").modal('show');
            }
        })

        //添加按钮点击事件
        $("#insert").click(function (){
            console.log("=======")
            location.href = "/admin/goods/insertGoods";
        });

        //删除功能
        let hiddenSpan = $("#hiddenSpan").text();
        //删除提示模态框
        if (hiddenSpan != ""){
            $("#modalText").text($("#hiddenSpan").text());
            $("#myModal").modal('show');
        }
    })
</script>

<!--下拉框样式-->
<style>
    #selectGoodstype {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: 1px solid #e1e1e1;
        border-radius: 4px;
        padding: 0 24px 0 8px;
        font-family: inherit;
        cursor: pointer;
        position: relative;
        background: url('') no-repeat right center;
    }
</style>

<body>
<!--头部导航条-->
<th:block th:insert="~{/fixed/headerBar::headBar}"></th:block>

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <th:block th:insert="~{/fixed/siedBar::siedBar}"></th:block>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <h2>商品管理</h2>

            <!--查询框-->
            <div class="row">
                <!--条件框1-->
                <div class="col-3">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">商品名称：</span>
                        </div>
                        <input id="selectByGoodsName" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
                    </div>
                </div>
                <!--条件框2-->
                <div class="col-2">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">分类名称：</span>
                        </div>
                        <select id="selectGoodstype">
                            <option></option>
                        </select>
                    </div>
                </div>

                <!--按钮组-->
                <div class="col-4">
                    <button id="select" class="btn btn-primary">查询</button>
                    <button id="insert" class="btn btn-success">添加</button>
                </div>
            </div>

            <div class="table-responsive" style="height: 710px;">
                <table style="text-align: center" class="table">
                    <thead class="thead-dark">
                    <tr>
                        <th class="col-1">#</th>
                        <th>商品名称</th>
                        <th>商品分类</th>
                        <th>商品库存</th>
                        <th>商品价格</th>
                        <th>商品描述</th>
                        <th class="col-2 .offset-10">编辑</th>
                    </tr>
                    </thead>
                    <tbody class="tbody" id="tbody" th:each="pages:${pageAll}">
                    <tr>
                        <td th:text="${pagesStat.count}"></td>
                        <td th:text="${pages.goodsName}"></td>
                        <td>
                            <span hidden th:text="${pages.tid}"></span>
                            <select id="goodstype" class="btn goodstype" th:value="${pages.tid}" style="appearance: none;pointer-events: none;">
                                <option></option>
                            </select>
                        </td>
                        <td th:text="${pages.goodsStock}"></td>
                        <td th:text="${pages.goodsPrice} + '元'"></td>
                        <td th:text="${pages.goodsDescribe}"></td>
                        <td>
                            <a th:href="@{/goods/updataGoods(gid = ${pages.gid})}">
                                <button class="btn btn-info">修改</button>
                            </a>
                            <a th:href="@{/goods/delete(gid = ${pages.gid})}">
                                <button class="btn btn-danger">删除</button>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!--分页按钮-->
            <div class="col align-self-end">
                <nav class="offset-md-5" aria-label="Page navigation example" th:if="${pageAll.totalPages>1}">
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" th:href="@{/goods(page = 0)}">首页</a>
                        </li>
                        <li class="page-item"  th:each="i: ${#numbers.sequence(1, pageAll.totalPages)}">
                            <a class="page-link" th:href="@{/goods(page = ${i - 1})}" th:text="${i}">1</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" th:href="@{/goods(page = ${pageAll.getTotalPages() - 1})}">尾页</a>
                        </li>
                    </ul>
                </nav>
            </div>

        </main>
    </div>
</div>

<!--删除提示-->
<span id="hiddenSpan" hidden th:text="${delMsg}"></span>
<!--引入模态框-->
<th:block th:insert="~{/fixed/modal::modal}"></th:block>
</body>
</html>